<!--
 * @Description: demo
 * @Author: wangqian
 * @LastEditors: wangqian
 * @Date: 2021-06-21 09:48:39
 * @LastEditTime: 2021-06-21 20:20:27
-->
<template>
  <div class="demo-page">
    <h1 ref="pageTitleRef" class="font-text">demo</h1>
    <ol-map
      ref="map"
      height="500px"
      @moveend="moveendHandle"
      @ready="readyHandle"
      @click="mapHtmlClickHandle(item)"
    >
      <!-- <my-map-heat v-if="mockHeatData" :data="mockHeatData"></my-map-heat> -->
      <my-map-geo :json="geo"></my-map-geo>
      <my-map-html :position="item.coordinate" v-for="(item, index) in mockHeatData" :key="index">
        <a-button type="primary">t</a-button>
      </my-map-html>
    </ol-map>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, watchEffect } from 'vue';
import olMap from '@/components/openlayers/index.vue';
// import MyMapHeat from '@/components/openlayers/packages/my-map-heat';
import MyMapHtml from '@/components/openlayers/packages/my-map-html';
import MyMapGeo from '@/components/openlayers/packages/my-map-geo';
// interface MockItemState {
//   coordinate: Array<number>;
// }
// function mockData(center: Array<number>, total) {
//   const [x, y] = center;
//   const data: Array<MockItemState> = [];
//   for (let i = 0; i < total; i++) {
//     data.push({
//       coordinate: [x + Math.random() - Math.random(), y + Math.random() - Math.random()],
//     });
//   }
//   return data;
// }
import china from './js/china.json';
console.log('china', china);
export default defineComponent({
  components: {
    olMap,
    // MyMapHeat,
    MyMapHtml,
    MyMapGeo,
  },
  setup() {
    const geo = ref(china);
    watchEffect(onInvalidate => {
      onInvalidate(() => {});
    });

    const mockHeatData = ref([]);
    // setTimeout(() => {
    //   mockHeatData.value = mockData([120, 30], 100);
    // }, 300);

    const mapHtmlClickHandle = e => {
      console.log('mapHtmlClickHandle', e);
    };
    const moveendHandle = e => {
      console.log('moveendHandle=', e);
    };

    const readyHandle = e => {
      console.log('readyHandle=', e);
    };

    return {
      mockHeatData,
      mapHtmlClickHandle,
      moveendHandle,
      readyHandle,
      geo,
    };
  },
});
</script>

<style lang="less" scoped>
// @import '~ant-design-vue/lib/style/themes/default.less';
.demo-page {
  .font-text {
    color: @primary-color;
  }
}
</style>
